/***
 *
 *   █████▒█    ██  ▄████▄   ██ ▄█▀       ██████╗ ██╗   ██╗ ██████╗
 * ▓██   ▒ ██  ▓██▒▒██▀ ▀█   ██▄█▒        ██╔══██╗██║   ██║██╔════╝
 * ▒████ ░▓██  ▒██░▒▓█    ▄ ▓███▄░        ██████╔╝██║   ██║██║  ███╗
 * ░▓█▒  ░▓▓█  ░██░▒▓▓▄ ▄██▒▓██ █▄        ██╔══██╗██║   ██║██║   ██║
 * ░██░   ▒▒█████▓ ▒ ▓███▀ ░▒██▒ █▄       ██████╔╝╚██████╔╝╚██████╔╝
 *  ▒ ░   ░▒▓▒ ▒ ▒ ░ ░▒ ▒  ░▒ ▒▒ ▓▒       ╚═════╝  ╚═════╝  ╚═════╝
 *  ░     ░░▒░ ░ ░   ░  ▒   ░ ░▒ ▒░
 *  ░ ░    ░░░ ░ ░ ░        ░ ░░ ░
 *           ░     ░ ░      ░  ░
 *
 *
 *  HUIB综合交流群：1003084383
 *  HUIB资源分享群：910387038
 *  QQ：2467226497
 *
 */

var Color_group = [];
var Color = net.brehaut.Color;

// 组件事件
$(function() {
    $('.slider-color').each(function(index){
        $(this).myDrag({
            direction: 'all',
            randomPosition: false,
            dragMove:function(){
                
            }
        });
    });

    // 菜单
    $("#menu").click(function(){
        win_min();
    });


    // 退出程序
    $("#close").click(function() {
        $("body").fadeOut(function() {
            win_out();
        });
    });


    // 复制颜色值
    $(".color-a,.mini,#color-big").click(function(){
        var color = $(this).css("background-color");
        var HEX = Color(color).toHSL().toCSS();
        copy_text("" + HEX);
    })


    // 切换颜色
    $(".color-b").click(function(){
        var color_a = $(".color-a").css("background-color");
        var color_b = $(".color-b").css("background-color");

        $(".color-a").css("background-color",color_b);
        $(this).css("background-color",color_a);
        $("#color-big").css("background-color",color_b);
        $("#ctx").mouseup();
    })


    // 取色
    $(".straw").click(function(){
        win_takeColor()
    });
}),


// 色环
$(function() {
    var mycanvas = document.getElementById('ctx');
    var ctx = mycanvas.getContext('2d');
    var img = new Image();
    var isDown = false;

    mycanvas.width="180";
    mycanvas.height="180";

    img.src = "img/color.png";
    img.onload = function(){ctx.drawImage(img,0,0,180,180);}

    
    $("#ctx").mousedown(function(e){isDown = true;getColor(e)});
    $("#ctx").mousemove(function(e){getColor(e)});
    $("#ctx").mouseup(function(e){isDown = false;changeColor()});

    // 获取色环颜色
    function getColor(e){
        var movex=e.pageX - $("#ctx").offset().left;
        var movey=e.pageY - $("#ctx").offset().top;
        var pixel = ctx.getImageData(movex,movey, 1, 1).data;

        var RGB = "rgb(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + ")";
        var HEX = Color(RGB).toCSS();
        var HSV = Color(RGB).toHSV();

        var complementary = HSV.splitComplementaryScheme()[2].toCSS();
        
        if(pixel[0]==0 || pixel[1]==0 || pixel[2]==0){isDown = false}
        if(isDown == true){
            $('.slider-color').css({left:movex-4,top:movey-4});
            $('.slider-color').mousedown();
            
            $(".color-a,#color-big").css("background-color",HEX);
            $(".color-b").css({"background-color":complementary});
            $(".color-hex").val(HEX.slice(1));
            $(".s").css("background-image","linear-gradient(to left," + HSV.setSaturation(1).toCSS() + ", #fff)");
            
            // 设置明度、饱和度滑块位置
            $("[SliderID=c_s]").css("left",216 * HSV.getSaturation());
            $("[SliderID=c_l]").css("left",216 * HSV.getValue());
            
        }
    }
}),


// 饱和度 / 明度滑块
$(function() {

    $('.block li').each(function(){
        var max = $(this).parents().width() - 10;
        var id = $(this).attr("SliderID");
        $(this).myDrag({
            direction: 'x',
            randomPosition: false,
            dragMove: function(x, y) {
                var HEX = $("#color-big").css("background-color");
                var HSV = Color(HEX).toHSV();

                var bfb = parseInt(x / max * 100);
                if (bfb > 100) {bfb = 100;}
                

                if(id=="c_s"){
                    if(bfb < 1){bfb = 1}
                    if(bfb > 99){bfb = 99}
                    HSV = HSV.setSaturation(bfb/100);
                }

                if(id=="c_l"){
                    if(bfb < 50){bfb = 1}
                    if(bfb > 99){bfb = 99}
                    HSV = HSV.setValue(bfb/100);
                }

                if(id=="c_a"){
                    $(".slider2 input").val(bfb  + "%");
                    HSV = HSV.setAlpha(1- bfb/100);
                }

                var complementary = HSV.splitComplementaryScheme()[2].toCSS();
                HEX = HSV.toCSS();

                $("#color-big,.color-a").css("background-color",HEX);
                $(".color-b").css("background-color",complementary);
                
                if(HEX.length>7){
                    $(".color-hex").css("text-align","left");
                    $(".color-hex").val(HEX);
                }else{
                    $(".color-hex").css("text-align","center");
                    $(".color-hex").val(HEX.slice(1));
                }
            }
        }),
        $("li[sliderid=c_s],li[sliderid=c_l],li[sliderid=c_a]").mouseup(function(e){
            changeColor()
        })

    });

});


function updataColor(HEX){
    var HSV = Color(HEX).toHSV();
    var complementary = HSV.splitComplementaryScheme()[2].toCSS();
    
    $(".color-hex").val(HEX.slice(1));
    $("#color-big,.color-a").css("background-color",HEX);
    $(".color-b").css("background-color",complementary);
    $(".s").css("background-image","linear-gradient(to left," + HSV.setSaturation(1).toCSS() + ", #fff)");
    
    // 设置明度、饱和度滑块位置
    $("[SliderID=c_s]").css("left",216 * HSV.getSaturation());
    $("[SliderID=c_l]").css("left",216 * HSV.getValue());

    changeColor();
}


// 颜色被修改
function changeColor(){
    var color = $("#color-big").css("background-color");
    var old_color = $("#color-big").attr("old-color");

    if(color != old_color){
        if(Color_group.length>10){Color_group.length=10;}
        Color_group.unshift(color);$("#color-big").attr("old-color",color);
        for(var i=0;i<Color_group.length;i++){
            $("#mini-color-" + i).css("background-color",Color_group[i])
        }
    }
}
